<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单添加</span>
      </div>
      <el-dialog title="导入文件" :visible.sync="importMaterBom">
        <el-upload
          class="upload-demo"
          drag
          action='/api/orderitem/importExcel'
          :on-success="updateMater"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传excel文件</div>
        </el-upload>
      </el-dialog>
      <el-dialog title="图片的上传" :visible.sync="improtPhoto">
        <el-upload
          class="upload-demo"
          ref="upload"
          :action="'/api/orderpic/importPhotos?code='+orderForm.code"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-dialog>
      <el-row :gutter="20">
        <el-col :span="11">
          订单编号：<el-input v-model="orderForm.code" style="width:280px;" disabled></el-input>
        </el-col>
        <el-col :span="11">
          客户：
          <el-select v-model="orderForm.customerId" placeholder="请选择">
            <el-option
              v-for="item in cuslist"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="20">
        <el-col :span="11">
          联系人：
          <el-select v-model="orderForm.linkmanId" placeholder="请选择">
            <el-option
              v-for="item in linklist"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="11">
          手机：<el-input v-model="orderForm.linkmanTel" style="width:280px;" disabled></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="20">
        <el-col :span="11">
          税率(%)：<el-input v-model="orderForm.taxRate" style="width:280px;" disabled></el-input>
        </el-col>
      </el-row>
      <br>
      <el-button @click="importMaterBom=true" type="info" class="btn"><i class="el-icon-upload2 el-icon--right"></i>上传BOM</el-button>&nbsp;
      <el-button @click="improtPhoto=true" type="info" class="btn"><i class="el-icon-upload2 el-icon--right"></i>上传图纸</el-button>&nbsp;
      <el-table
        :data="matlist"
        style="width: 75%"
        border="true">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="编号"
          >
          <template slot-scope="scope">
              <a :href="'/api/orderpic/showPhoto/'+orderForm.code+'/'+scope.row.code" target="_blank">{{scope.row.code}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="零件名称"
          >
        </el-table-column>
        <el-table-column
          prop="num"
          label="生产数量">
        </el-table-column>
      </el-table>
      <el-button @click="saveOrder"  plain type="info">添加</el-button>
      <el-button @click="reset()" type="primary">重置</el-button>
      <el-button @click="goback()" type="primary">返回</el-button>
    </el-card>
  </div>
</template>

<script>
    export default {
        name: "orderAdd",
      data(){
          return{
            fileList:[],
            improtPhoto:false,
            importMaterBom:false,
            cuslist:[],//客户
            linklist:[],//联系人
            matlist:[],//零件
            orderForm:{
              linkmanId:null,
              taxRate:null,
              linkmanTel:null,
              linkmanName:null
            }//订单表
          }
      },
      methods:{
        saveOrder:function(){//订单添加
          debugger
          if(this.orderForm.customerId==null){
            this.$message.error('请选择客户');
            return
          }
          if(this.orderForm.linkmanId==null){
            this.$message.error('请选择联系人');
            return
          }
          if(this.matlist.length==0){
            this.$message.error('请上传BOM');
            return
          }
          this.$http.post("/order/saveOrder",{piOrder:this.orderForm,piOrderItem:this.matlist}).then((res)=> {
            if(res.data.success){
              this.$message({
                message: res.data.message,
                type: 'success'
              })
            }else {
              this.$message.error(res.data.message);
            }
            this.$router.push('/order');
          })
        },
        submitUpload() {
          this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        updateMater:function(res){//BOM上传
          this.matlist=res.result
          this.importMaterBom=false
        },
        goback(){//返回
          this.$router.push('/order');
        },
        reset(){//重置
          this.orderForm={};
        },
        getCustom(){//用户列表
          this.$http.get("/customer/getCustom").then((res)=>{
            this.cuslist=res.data.result
          })
        },
        getLink:function (a) {//根据id查询联系人列表
          this.$http.post("/link/getAllLinkById/"+a).then((res)=>{
            this.linklist=res.data.result
          })
        },
        getLinkPhone:function (a) {//根据id查询手机号码  名字
          this.$http.post("/link/getOne/"+a).then((res)=>{
            this.orderForm.name=res.data.result.name
            this.orderForm.linkmanName=res.data.result.name
            this.orderForm.linkmanTel=res.data.result.tel
          })
        },
        createOid:function () {//雪花随机生成id
          this.$http.get("/order/getOrderId").then((res)=>{
            this.orderForm.code=res.data
          })
        }
      },
      created () {
          this.getCustom()
      },
      mounted(){
        this.createOid()
        let user=JSON.parse(sessionStorage.getItem("user"));
        this.orderForm.userid=user.id
      },
      watch:{
          'orderForm.customerId':{
            deep:true,
            handler:function (val) {
                this.$http.get("/customer/get/"+val).then((res)=>{
                  this.orderForm.customerName=res.data.result.name
                  this.orderForm.taxRate=res.data.result.taxRate
                })
                this.getLink(val)
            }
          },
        'orderForm.linkmanId':{
            deep:true,
          handler:function (val) {
              this.getLinkPhone(val)
          }
        }
      }
    }
</script>

<style scoped>

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 1200px;
  }
  .btn{/*按钮的圆角样式*/
    border-radius: 30px;
  }
</style>
